
.vb-button-wrapper{
    margin-right:10px ;
    .vb-button {
        margin-right: 10px;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        &:hover{
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
            }
    }
    
    .vb-primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        &:hover{
            background-color: #66b1ff;
            border-color:#66b1ff; 
            color: #fff;
        }
    }
    
    .vb-success {
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
        &:hover{
            background-color: #85ce61;
            border-color: #85ce61;
            color: #fff;
         }
    }
    
    .vb-info {
        color: #fff;
        background-color: #909399;
        border-color: #909399;
        &:hover {
            color: #fff;
            background-color: #a6a9ad;
            border-color: #a6a9ad;
        }
    }
  
    .vb-warning {
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
        &:hover{
            color: #fff;
            background-color: #ebb563;
            border-color: #ebb563;
        }
    }
    .vb-danger{
        color:#fff;
        background-color:#f56c6c;
        border-color:#f56c6c;
        &:hover{
            color:#fff;
            background-color: #f78989;
            border-color: #f78989;
        }
    }

    .vb-button.isPlain {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        &:hover{
            color: #409eff;
            border-color: #409eff;
            background-color: #fff;
            }
    }
    
    .vb-primary.isPlain {
        color: #409eff;
        background-color: #ecf5ff;
        border-color: #b3d8ff;
        &:hover{
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
           
        }
    }
    
    .vb-success.isPlain {
        color: #67c23a;
        background: #f0f9eb;
        border-color: #c2e7b0;

        &:hover{
            color: #fff;
            background-color: #67c23a;
            border-color: #67c23a;
         }
    }
    
    .vb-info.isPlain {
        color: #909399;
        background: #f4f4f5;
        border-color: #d3d4d6;
        &:hover {
            color: #fff;
            background-color: #909399;
            border-color: #909399;
        }
    }
  
    .vb-warning.isPlain {
        color: #e6a23c;
        background: #fdf6ec;
        border-color: #f5dab1;
        &:hover{
            color: #fff;
            background-color: #e6a23c;
            border-color: #e6a23c;
        }
    }
    .vb-danger.isPlain{
        color: #f56c6c;
        background: #fef0f0;
        border-color: #fbc4c4;
        &:hover{
            color:#fff;
            background-color:#f56c6c;
            border-color:#f56c6c;
        }
    }

    .vb-button.isRound {
        border-radius: 20px;
        padding: 12px 23px;
        &:hover{
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
            }
    }
    
    .vb-primary.isRound {
        border-radius: 20px;
        padding: 12px 23px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        &:hover{
            background-color: #66b1ff;
            border-color:#66b1ff; 
            color: #fff;
        }
    }
    
    .vb-success.isRound {
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
        &:hover{
            background-color: #85ce61;
            border-color: #85ce61;
            color: #fff;
         }
    }
    
    .vb-info.isRound {
        color: #fff;
        background-color: #909399;
        border-color: #909399;
        &:hover {
            color: #fff;
            background-color: #a6a9ad;
            border-color: #a6a9ad;
        }
    }
  
    .vb-warning.isRound {
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
        &:hover{
            color: #fff;
            background-color: #ebb563;
            border-color: #ebb563;
        }
    }
    .vb-danger.isRound{
        color:#fff;
        background-color:#f56c6c;
        border-color:#f56c6c;
        &:hover{
            color:#fff;
            background-color: #f78989;
            border-color: #f78989;
        }
    }

    .vb-button.isCircle {
        border-radius: 50%;
        padding: 12px;
        &:hover{
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
            }
    }
    
    .vb-primary.isCircle {
        border-radius: 50%;
        padding: 12px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        &:hover{
            background-color: #66b1ff;
            border-color:#66b1ff; 
            color: #fff;
        }
    }
    
    .vb-success.isCircle {
        border-radius: 50%;
        padding: 12px;
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
        &:hover{
            background-color: #85ce61;
            border-color: #85ce61;
            color: #fff;
         }
    }
    
    .vb-info.isCircle {
        border-radius: 50%;
        padding: 12px;
        color: #fff;
        background-color: #909399;
        border-color: #909399;
        &:hover {
            color: #fff;
            background-color: #a6a9ad;
            border-color: #a6a9ad;
        }
    }
  
    .vb-warning.isCircle {
        border-radius: 50%;
        padding:12px;
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
        &:hover{
            color: #fff;
            background-color: #ebb563;
            border-color: #ebb563;
        }
    }
    .vb-danger.isCircle{
        border-radius: 50%;
        padding: 12px;
        color:#fff;
        background-color:#f56c6c;
        border-color:#f56c6c;
        &:hover{
            color:#fff;
            background-color: #f78989;
            border-color: #f78989;
        }
    }
    .vb-button.isDisabled,.vb-button.isDisabled:hover,.vb-button.isDisabled:focus{
        color: #c0c4cc;
        cursor: not-allowed;
        background-image: none;
        background-color: #fff;
        border-color: #ebeef5;
        cursor: not-allowed;
        
    }
    .vb-primary.isDisabled,.isDisabled.vb-primary:hover,.isDisabled.vb-primary:focus{
        color: #fff;
        background-color: #a0cfff;
        border-color: #a0cfff;
    }
    .isDisabled.vb-success,.isDisabled.vb-success:hover,.isDisabled.vb-success:focus{
        color: #fff;
        background-color: #b3e19d;
        border-color: #b3e19d;
    }
    .isDisabled.vb-danger,.isDisabled.vb-danger:hover,.isDisabled.vb-danger:focus{
        color: #fff;
        background-color: #fab6b6;
        border-color: #fab6b6;
    }

}   